<template>
  <div class="login-container flex-b-r">
    <div class="login-body">
      <div class="main_body">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="个人账号" name="first">
            <div class="input_field">
              <div class="input_field_top">
                <el-input
                  prefix-icon="el-icon-mobile-phone"
                  v-model="input"
                  placeholder="请输入手机号"
                ></el-input>
              </div>
              <div class="input_field_btm">
                <el-input
                  prefix-icon="el-icon-lock"
                  v-model="input"
                  placeholder="请输入验证码"
                ></el-input>
                <p>获取验证码</p>
              </div>

              <el-button type="primary" @click="handelLogin(1)"
                >登录/注册</el-button
              >
            </div>
          </el-tab-pane>
          <el-tab-pane label="企业账号" name="second">
            <div class="input_field">
              <div class="input_field_top">
                <el-input
                  prefix-icon="el-icon-mobile-phone"
                  v-model="input"
                  placeholder="请输入手机号"
                ></el-input>
              </div>
              <div class="input_field_btm">
                <el-input
                  prefix-icon="el-icon-lock"
                  v-model="input"
                  placeholder="请输入验证码"
                ></el-input>
                <p>获取验证码</p>
              </div>

              <el-button type="primary" @click="handelLogin(2)"
                >登录/注册</el-button
              >
            </div>
          </el-tab-pane>
        </el-tabs>
        <p class="Instructions">首次验证码通过既注册侦迹云账号</p>
        <div class="agreement">
          <el-checkbox v-model="checked"></el-checkbox>
          已阅读并同意<span style="color: #409eff"
            >《用户协议》《隐私政策》《免责声明》《合作协议》</span
          >允许侦迹云直聘统一管理本人账号信息
        </div>
        <p class="p_phone p_phone_top">
          客服电话:xxx-xxx-xxxx 工作时间:8:00-22:00
        </p>
        <p class="p_phone">人力资源服务许可证|营业执照|xx区人社局监督电话</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "Login",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      activeName: "first", // 个人 企业切换
      input: "", // 输入框
      checked: false, // 协议
    };
  },
  // 组件初始化
  created() {},
  // 组件实例挂载完毕
  mounted() {},
  //销毁事件
  destroyed() {},
  // 组件方法
  methods: {
    // handelclick() {
    //   this.$router.push("/");
    // },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handelLogin(num) {
      if (num == 1) {
        this.$router.push("/agesign");
      } else if (2) {
        this.$router.push("/firmsign");
      }
    },
  },
};
</script>

<style scoped lang="less">
// 标题框的宽度
/deep/.el-tabs__item {
  width: 50% !important;
  text-align: center;
}
// 底部选中线宽度
/deep/.el-tabs__active-bar {
  width: 50% !important;
}
// 底部宽度
/deep/.el-tabs__nav {
  width: 100% !important;
  background-color: #ffffff;
}
// 个人账号，企业账号
/deep/.el-tabs__item {
  font-size: 19px !important;
  font-weight: 600;
}

// 按钮
.el-button {
  width: 100%;
  font-weight: 600;
  margin-top: 20px;
}
// 放输入框的div
.input_field {
  width: 99%;
  height: 160px;
  // margin-top: -8px;
  .input_field_top {
    width: 100%;
    height: 35px;
  }
  .input_field_btm {
    width: 100%;
    height: 35px;
    margin-top: 20px;
    position: relative;
    p {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 14px;
      color: #53a0e8;
      font-weight: 600;
    }
  }
}
// 主体内容
.login-container {
  min-width: 400px !important;
  height: 100%;
  display: flex;
  background-color: #b5d6f5;

  .login-body {
    width: 380px;
    min-height: 420px !important;
    font-size: 16px;
    margin: auto;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 0px 3px 3px #a8c7e4;
    .main_body {
      width: 300px;
      min-height: 360px;
      margin: 0 auto;
      margin-top: 45px;
      // border: 1px solid gold;
    }
  }
}
// 说明
.Instructions {
  width: 100%;
  height: 20px;
  color: #9e9e9e;
  font-size: 12px;
  margin-top: 15px;
}
// 协议
.agreement {
  width: 100%;
  height: 40px;
  margin-top: 12px;
  font-size: 12px;
}
// 电话时间
.p_phone {
  font-size: 12px;
  color: gray;
  text-align: center;
  margin-top: 5px;
}
.p_phone_top {
  margin-top: 12px;
}
</style>
